<template>
  <div class="main-content" style="padding-top: 60px">
    <div style="display: flex; grid-gap: 10px">
      <!-- 左边帖子详情 -->
      <div
        style="
          flex: 3;
          padding: 23px;
          text-align: left;
          height: 597px;
          overflow: scroll;
        "
      >
        <!-- 文章 -->
        <div class="card" style="margin-bottom: 20px">
          <div style="display: flex">
            <div style="flex: 6">
              <div
                style="font-weight: bold; font-size: 24px; margin-bottom: 20px"
              >
                {{ post.title }}
              </div>
              <div style="color: #666; margin-bottom: 20px">
                <span style="margin-right: 20px"
                  ><i class="el-icon-user" style="margin-right: 4px"></i
                  >{{ post.username }}</span
                >
                <span style="margin-right: 20px"
                  ><i class="el-icon-date" style="margin-right: 4px"></i
                  >{{ post.postDate }}</span
                >
                <span style="margin-right: 20px"
                  ><i class="el-icon-view" style="margin-right: 4px"></i
                  >{{ post.views }}</span
                >
                <span style="margin-right: 20px"
                  ><i class="el-icon-like" style="margin-right: 4px"></i
                  >{{ post.likes }}</span
                >
                
                <span>
                  
                  
                  <el-tag
                    v-for="(item, index) in tags"
                    :key="index"
                    type="primary"
                    style="margin-right: 5px"
                  >
                    {{ item }}
                  </el-tag>
                </span>
              </div>
            </div>
            <!-- 返回上一级 -->
            <el-affix :offset="120">
              <div style="flex: 1">
                <el-button type="primary" @click="returnGoPage">返回</el-button>
              </div>
            </el-affix>
          </div>
          <div>
            <div v-html="post.content"></div>
          </div>
        </div>
        <!-- 点赞收藏 -->
        <div
          class="card"
          style="
            text-align: center;
            font-size: 20px;
            color: #666;
            margin-bottom: 10px;
          "
        >
          <span
            style="margin-right: 20px; cursor: pointer"
            @click="setLikes()"
            :class="{ active: likesFlag }"
            ><i class="el-icon-like"></i> {{ post.likes }}</span
          >
          <span
            style="cursor: pointer;margin-right: 20px;"
            @click="setFavorites()"
            :class="{ active: favoritesFlag }"
            ><i class="el-icon-star-off"></i> {{ post.favorites }}</span
          >
          <span
            style="cursor: pointer"
            ><i class="el-icon-warning-outline"></i> {{ post.favorites }}</span
          >
        </div>
        <!-- 评论 -->
        <Comment :postId="postId" />
      </div>
      <!-- 右边用户信息 -->
      <div
        class="card"
        style="
          padding: 23px;
          text-align: left;
          overflow: scroll;
          height: 600px;
          width: 25%;
          flex: 1;
        "
      >
        <!-- 信息 -->
        <div class="card" style="margin-bottom: 10px">
          <div
            style="
              display: flex;
              align-items: center;
              grid-gap: 10px;
              margin-bottom: 10px;
            "
          >
            <el-image style="width: 60px; height:60px;border-radius: 50%" :src="post.user?.avatar" :preview-src-list="[post.user?.avatar]" />
            <div style="flex: 1">
              <div style="display: flex">
                <div
                  style="
                    font-weight: bold;
                    padding-top: 8px;
                    font-size: 15px;
                    flex: 1;
                  "
                >
                  {{ post.user?.realName }}
                </div>
                <div style="flex: 3;">
                  <el-button type="text" v-if="isTowFollow==true" style="font-size: 15px;padding-top: 11px" @click="setFollow()">互相关注</el-button>
                  <el-button type="text" v-else-if="isFollow==true" style="font-size: 15px;padding-top: 11px"  @click="setFollow()">已关注</el-button>
                  <el-button type="text" v-else style="font-size: 15px;padding-top: 11px"  @click="setFollow()">+关注</el-button>
                </div>
              </div>
              <div style="color: #666; font-size: 14px" class="towline">
                {{ post.user?.profile }}
              </div>
            </div>
          </div>
          <div style="display: flex">
            <div style="flex: 1; text-align: center">
              <div style="margin-bottom: 5px">文章</div>
              <div style="color: #888">{{ post.postCount }}</div>
            </div>
            <div style="flex: 1; text-align: center">
              <div style="margin-bottom: 5px">点赞</div>
              <div style="color: #888">{{ post.postLikeCount }}</div>
            </div>
            <div style="flex: 1; text-align: center">
              <div style="margin-bottom: 5px">收藏</div>
              <div style="color: #888">{{ post.postFavoriteCount }}</div>
            </div>
          </div>
        </div>
        <!-- 相关推荐 -->
        <div
          class="card"
          style="margin-bottom: 10px; height: 400px; overflow: auto"
        >
          <div
            style="
              font-weight: bold;
              font-size: 20px;
              padding-bottom: 10px;
              border-bottom: 1px solid #ddd;
              margin-bottom: 10px;
            "
          >
            相关推荐
          </div>

          <div>
            <div
              style="margin-bottom: 15px"
              v-for="item in recommendList"
              :key="item.id"
            >
              <div
                style="margin-bottom: 5px; cursor: pointer"
                class="push"
                @click="push(item.postId)"
              >
                {{ item.title }}
              </div>
              <div style="color: #888">
                <span>阅读</span> <span>{{ item.views }}</span>
                <span style="margin-left: 10px">点赞</span>
                <span>{{ item.likes }}</span>
              </div>
            </div>
          </div>
        </div>
        <!-- 广告 -->
        <div class="card">
          <div style="display: flex; grid-gap: 10px">
            <div style="flex: 1; line-height: 25px">
              找对属于你的宠物圈子<br />
              扫码咨询精品圈子
            </div>
            <img
              src="@/assets/bg.jpg"
              alt=""
              style="width: 60px; height: 60px; border-radius: 5px"
            />
            
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import request from "@/utils/request";
import "highlight.js/styles/monokai-sublime.css";
import Comment from "@/components/user/Comment";
export default {
  name: "PostDetail",
  components: {
    Comment,
  },
  data() {
    return {
      postId: this.$route.query.postId,
      post: {}, //用于存储帖子信息
      tags: [], //存储tags信息
      recommendList: [], //相关推荐
      likesFlag: "", //判断是否点赞
      favoritesFlag: "", //判断是否已经收藏
      userId:JSON.parse(sessionStorage.getItem("user")).userId, 
      isFollow:false,//是否关注
      isTowFollow:false,//是否双向关注
    };
  },
  activated() {
    // 在组件被激活时重新加载数据
    this.postId = this.$route.query.postId;
    this.load();
  },
  mounted() {
    this.updateView();
    this.load();
    this.loadLike();
    this.loadFavorite();
    this.loadRecommendList();
  },
  methods: {
    // 该帖子的详情
    load() {
      request
        .get("/post/selectById/" + this.$route.query.postId)
        .then((res) => {
          this.post = res.data || [];
          this.tags = JSON.parse(res.data.tag || "[]");
        }).then(()=>{
          this.loadFollow(this.userId,this.post.user.userId);
        });
    },
    //相关推荐
    loadRecommendList() {
      request.get("/post/selectRecommend/" + this.postId).then((res) => {
        this.recommendList = res.data || [];
      });
    },
    // 点赞
    loadLike() {
      request
        .post("/likes/flag", { fid: this.postId, module: "帖子" })
        .then((res) => {
          if (res.code === 0) {
            this.likesFlag = res.data;
          }
        });
    },
    //收藏
    loadFavorite() {
      request.post("/favorite/flag", { postId: this.postId }).then((res) => {
        if (res.code === 0) {
          this.favoritesFlag = res.data;
        }
      });
    },
    //是否关注
    loadFollow(loginId,userId){
      request.get("/follow?userId="+loginId+"&followUserId="+userId).then((res)=>{
        this.isFollow=res.data;
        if(this.isFollow){
          request.get("/follow?userId="+userId+"&followUserId="+loginId).then((res)=>{
            this.isTowFollow=res.data;
          });
        }else{
            this.isTowFollow=false;
        }
        
      });
    },
    // 点赞
    setLikes() {
      request
        .post("/likes/set", { fid: this.postId, module: "帖子" })
        .then((res) => {
          if (res.code === 0) {
            this.likesFlag = res.data;

            this.$message.success("操作成功");
            this.load();
          }
        });
    },
    //收藏
    setFavorites() {
      request.post("/favorite/set", { postId: this.postId }).then((res) => {
        if (res.code === 0) {
          this.favoritesFlag = res.data;
          this.$message.success("操作成功");
          this.load();
        }
      });
    },
    //关注
    setFollow(){
      request.post("/follow?userId="+this.post.user.userId).then((res)=>{
         if (res.code === 0) {
          this.$message.success("操作成功");
          this.loadFollow(this.userId,this.post.user.userId);
         }
      })
    },
    updateView() {
      request.post("/post/updateViews", { postId: this.postId }).then((res) => {
        if (res.code === 0) {
          this.load();
        }
      });
    },

    //跳转
    push(postId) {
      this.$router.push(`/user/postDetail?postId=${postId}`).then(() => {
        this.$router.go(0);
      });
    },
    //返回上一级
    returnGoPage() {
      // 获取当前路径
      const currentPath = this.$route.path;

      // 返回上一级
      this.$router.go(-1);

      // 在路由跳转后，等待一段时间再判断是否需要刷新当前页面
      setTimeout(() => {
        if (this.$route.path === currentPath) {
          // 当前路径与返回后的路径相同，刷新当前页面
          this.$router.go(0);
        }
      }, 100); // 可根据实际情况调整延迟时间
    },
  },
};
</script>
<style>
.main-content {
  width: 100%;
  height: 100%;
  margin: 5px auto;
}
/* 防止缩小后样式发生改变 */
@media screen and (max-width: 768px) {
  .main-content {
    width: 100%; /* 在小屏幕下铺满整个宽度 */
    padding: 0 10px; /* 添加一些 padding 来保持内容与屏幕边缘的距离 */
  }
}
.card {
  padding: 20px;
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.1);
}

/* blockquote 样式 */
blockquote {
  display: block;
  border-left: 8px solid #d0e5f2;
  padding: 20px 10px;
  margin: 10px 0;
  line-height: 1.4;
  font-size: 100%;
  background-color: #f1f1f1;
}

/* code 样式 */
code {
  display: inline-block;
  *display: inline;
  *zoom: 1;
  background-color: #f1f1f1;
  border-radius: 3px;
  padding: 3px 5px;
  margin: 0 3px;
}
pre code {
  display: block;
}
p {
  line-height: 30px;
}
/* 超出两行省略 */
.towline {
  word-break: break-all;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; /* 超出几行省略 */
  overflow: hidden;
}
/* 已经点赞收藏样式 */
.active {
  color: #1890ff;
}
/* 链接 */
.push:hover {
  color: #1890ff;
}
</style>
